<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<view @tap.stop="switchValue" class="yb-switch yb-flex yb-row yb-align-center yb-justify-between" :style="{
			width: (Util.unitpixel(size) * 2) + 'px',
			height: Util.pixelunit(size),
			'border-radius': Util.pixelunit(optionsSync.radius),
			'background-color': openSync.bgColor,
			'padding-left': (Util.unitpixel(size) / 3) + 'px',
			'padding-right': (Util.unitpixel(size) / 3) + 'px',
			opacity: disabled ? 0.5 : 1
		}">
			<view class="close yb-flex" ref="close" :style="{
				'transform': 'translateX(' + ( valueSync ? Util.unitpixel(size) : 0 ) + 'px)',
				'width': (valueSync ? Util.unitpixel(size) : Util.unitpixel(size) * 2 ) + 'px',
				'border-radius': Util.pixelunit(optionsSync.radius),
				'background-color': closeSync.bgColor
			}"></view>
			<text class="text yb-flex" :style="{
				'font-size': (Util.unitpixel(size) / 2) + 'px',
				color: openSync.color,
				opacity: valueSync ? 1 : 0
			}">{{openSync.text}}</text>
			<text class="text" :style="{
				'font-size': (Util.unitpixel(size) / 2) + 'px',
				color: closeSync.color,
				opacity: valueSync ? 0 : 1
			}">{{closeSync.text}}</text>
			<view class="item yb-flex yb-align-center yb-justify-center" ref="item" :style="{
				width: (Util.unitpixel(size) - 4) + 'px',
				height: (Util.unitpixel(size) - 4) + 'px',
				'transform': 'translateX(' + ( valueSync ? Util.unitpixel(size) : 0 ) + 'px)',
				'border-radius': Util.pixelunit(optionsSync.radius),
				'background-color': optionsSync.itemColor
			}">
				<yb-loading :visible="loading && async" :type="loadingSync.type" :color="loadingSync.color" :size="(Util.unitpixel(size) / 2) + 'px'"></yb-loading>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			size: {
				type: [Number,String],
				default: 45
			},
			//开启异步
			async: {
				type: Boolean,
				default: false
			},
			open: {
				type: [String, Object],
				default () {
					return new Object
				}
			},
			close: {
				type: [String, Object],
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			Util () {
				return Util
			},
			openSync () {
				return Object.assign({}, {
					text: '开',
					color: '#ffffff',
					bgColor: '#2ca2f9'
				}, Util.typeof(this.open) == 'Object' ? this.open : Util.typeof(this.open) == 'String' ? { text: this.open } : {})
			},
			closeSync () {
				return Object.assign({}, {
					text: '关',
					color: '#ffffff',
					bgColor: '#bbbbbb'
				}, Util.typeof(this.close) == 'Object' ? this.close : Util.typeof(this.close) == 'String' ? { text: this.close } : {})
			},
			optionsSync () {
				return Object.assign({}, {
					radius: this.size,
					itemColor: '#fff',
					loading: {}
				}, this.options)
			},
			loadingSync () {
				return Object.assign({}, {
					type: 1,
					color: '#333'
				}, Util.typeof(this.optionsSync.loading) == 'Object' ? this.optionsSync.loading : Util.typeof(this.optionsSync.loading) == 'String' | Util.typeof(this.optionsSync.loading) == 'Number' ? { type: this.optionsSync.loading } : {})
			}
		},
		data () {
			return {
				valueSync: false,
				loading: false
			}
		},
		created () {
			this.valueSync = this.value;
		},
		beforeDestroy() {
			// #ifdef APP-NVUE
			if ( this.switch_binding ) {
				Binding.unbind({
					token: this.switch_binding.token,
					eventType: 'timing'
				})
				this.switch_binding = null
			}
			// #endif
			// #ifndef APP-NVUE
			if ( this.switch_timer ) {
				clearTimeout(this.switch_timer)
				this.switch_timer = null
			}
			// #endif
		},
		methods: {
			switchValue (e) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				if ( this.disabled ) {
					return
				}
				if ( this.loading ) {
					return
				}
				if ( this.async ) {
					this.loading = true
					this.$emit('asyncChange', !this.valueSync);
				} else {
					this.finish()
				}
			},
			reset () {
				this.loading = false
			},
			finish () {
				this.valueSync = !this.valueSync
				this.$emit('input', this.valueSync);
				this.$emit('change', this.valueSync);
			}
		},
		watch: {
			value (newVal, oldVal) {
				if ( newVal != oldVal ) {
					this.valueSync = newVal;
				}
			}
		}
	}
</script>

<style scoped>
	.yb-switch {
		position: relative;
	}
	.yb-switch .close {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: transform .2s, width .2s;
	}
	.yb-switch .item {
		position: absolute;
		left: 2px;
		top: 2px;
		transition: transform .2s, background-color .2s;
		/* #ifndef APP-NVUE */
		z-index: 2;
		/* #endif */
	}
	.yb-switch .text {
		position: relative;
		transition: opacity .2s;
		/* #ifndef APP-NVUE */
		z-index: 1;
		/* #endif */
	}
</style>
